<template>
  <div class="slide-x">
    <ul class="img-content">
      <li v-for="n in 6" :key="n">
        <img src="../../assets/img/tuceng4.png">     
      </li>
    </ul>
  </div>
</template>

<script>
// import { defineComponent } from '@vue/composition-api'
import BetterScroll from 'better-scroll'
export default {
  mounted() {
    new BetterScroll('.slide-x', {
      scrollX: true,
      scrollY: false,
      click: true,
      // mouseWheel: true,//开启鼠标滚轮
      disableMouse: false,//启用鼠标拖动
      disableTouch: false,//启用手指触摸
    });
  },
};
</script>

<style lang="less" scoped>
.slide-x {
  width: 100%;
  height: 84px;
  overflow: hidden;
  // background: red;
  .img-content {
    height: 100%;
    display: inline-flex; //行内元素的宽度可以被子元素撑开 块级元素不行
    li {
      margin-right: 10px;
      flex-shrink: 0;
      // border: 1px solid red;
      img {
      width: 250px;
      height: 100%;
      }  
    }
  }
}
</style>
